<template>
  <div>
    <el-card :bordered="false" dis-hover class="ivu-mb-16">
      <el-form
        ref="formValidate"
        :model="formValidate"
        label-width="75px"
        label-position="right"
        class="tabform"
        @submit.native.prevent
      >
        <el-form-item label="时间选择：">
          <el-radio-group
            v-model="formValidate.date"
            type="button"
            @change="selectChange(formValidate.date)"
            class="mr"
          >
            <el-radio-button
              :label="item.val"
              v-for="(item, i) in fromList.fromTxt"
              :key="i"
            >{{ item.text }}</el-radio-button>
          </el-radio-group>
          <el-date-picker
            @change="onchangeTime"
            v-model="timeVal"
            format="yyyy/MM/dd"
            value-format="yyyy/MM/dd"
            type="daterange"
            placement="bottom-end"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            style="width: 300px"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="提现状态：">
          <el-radio-group
            type="button"
            v-model="formValidate.status"
            class="mr15"
            @change="selChange"
          >
            <el-radio-button
              :label="itemn.value"
              v-for="(itemn, indexn) in treeData.withdrawal"
              :key="indexn"
            >
              {{
              itemn.title
              }}
            </el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="提现方式：">
          <el-radio-group
            type="button"
            v-model="formValidate.extractType"
            class="mr15"
            @change="selChange"
          >
            <el-radio-button
              :label="itemn.value"
              v-for="(itemn, indexn) in treeData.payment"
              :key="indexn"
            >
              {{
              itemn.title
              }}
            </el-radio-button>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="搜索：">
          <div class="acea-row row-middle">
            <el-input
              placeholder="微信昵称/姓名/支付宝账号/银行卡号"
              element-id="name"
              v-model="formValidate.nireid"
              style="width: 30%"
            >
              <el-button type="primary" slot="append" @click="selChange" icon="el-icon-search"></el-button>
            </el-input>
          </div>
        </el-form-item>
      </el-form>
    </el-card>
    <div class="i-layout-page-header">
      <div>
        <el-tabs v-model="status_str" @tab-click="onChangeTab">
          <el-tab-pane
            v-for="(item , index) in tabs"
            :label="item.tit"
            :name="item.name"
            :key="index"
          />
        </el-tabs>
      </div>
    </div>
    <cards-data :cardLists="cardLists" v-if="extractStatistics"></cards-data>
    <el-card :bordered="false" dis-hover>
      <el-table
        ref="table"
        :columns="columns"
        :data="tabList"
        class="ivu-mt"
        :loading="loading"
        no-data-text="暂无数据"
        no-filtered-data-text="暂无筛选结果"
      >
        <el-table-column label="Id" min-width="80" fixed="left" #default="{row}">{{row.id}}</el-table-column>
        <el-table-column label="用户信息" min-width="180" #default="{row}">
          <div>
            {{status_str == 1?'用户昵称':'门店名称'}}: {{status_str == 1 ? row.serviceUserName: row.nickname }}
            <br />
            {{status_str==1?'用户id':'门店id'}}:{{ status_str==1?row.serviceUserId:row.companyId }}
          </div>
        </el-table-column>
        <el-table-column label="提现金额" min-width="90" #default="{row}">{{row.extractPrice}}</el-table-column>
        <el-table-column label="提现方式" min-width="150" #default="{row}">
          <div class="type" v-if="row.extractType === 'bank'">
            <div class="item">姓名:{{ row.realName }}</div>
            <div class="item">银行卡号:{{ row.bank_code }}</div>
            <div class="item">银行开户地址:{{ row.bankAddress }}</div>
          </div>
          <div class="type" v-if="row.extractType === 'wx'">
            <div class="item">昵称:{{ row.realName }}</div>
            <div class="item">微信号:{{ row.wechat }}</div>
          </div>
          <div class="type" v-if="row.extractType === 'alipay'">
            <div class="item">姓名:{{ row.realName }}</div>
            <div class="item">支付宝号:{{ row.alipayCode }}</div>
          </div>
          <div class="type" v-if="row.extractType === 'balance'">
            <div class="item">姓名:{{ row.realName }}</div>
            <div class="item">提现方式：佣金转入余额</div>
          </div>
        </el-table-column>
        <el-table-column label="收款码" min-width="150" #default="{row}">
          <div class="tabBox_img" v-if="row.extractType === 'wx' || row.extractType === 'alipay'">
            <el-image :src="row.qrcodeUrl" :preview-src-list="[row.qrcodeUrl]" />
          </div>
        </el-table-column>
        <el-table-column label="添加时间" min-width="150" #default="{row}">{{row.addTimeStr}}</el-table-column>
        <el-table-column label="审核状态" min-width="150" #default="{row}">
          <div class="status" v-if="row.status === 0">
            <div class="statusVal">申请中</div>
            <div>
              <el-button
                type="error"
                icon="md-close"
                size="small"
                class="item"
                @click="invalid(row)"
              >驳回</el-button>
              <el-button
                type="primary"
                icon="md-checkmark"
                size="small"
                class="item"
                @click="adopt(row, '审核通过', index)"
              >通过</el-button>
            </div>
          </div>
          <div class="statusVal" v-if="row.status === 1">提现通过</div>
          <div class="statusVal" v-if="row.status === -1">
            提现未通过
            <br />
            未通过原因：{{ row.fail_msg }}
          </div>
        </el-table-column>
      </el-table>
      <div class="acea-row row-right page">
        <el-pagination
          :total="total"
          :current-page="formValidate.page"
          show-elevator
          show-total
          @current-change="pageChange"
          :page-size="formValidate.limit"
        />
      </div>
    </el-card>

    <!-- 编辑表单-->
    <!-- <edit-from ref="edits" :FromData="FromData" @submitFail="submitFail"></edit-from> -->
    <!-- 拒绝通过-->
    <el-dialog :visible.sync="modals" scrollable closable title="未通过原因" :mask-closable="false">
      <el-input v-model="fail_msg.message" type="textarea" :rows="4" placeholder="请输入未通过原因" />
      <div slot="footer">
        <el-button type="primary" size="large" long :loading="modal_loading" @click="oks">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import cardsData from '@/components/cards';
import { cashListApi, cashAdoptApi, cashRefuseApi } from '@/api/onsite';
import { companyExtractListApi, companyExtractAdoptApi, companyExtractRefuseApi } from '@/api/base';
export default {
  components: {
    cardsData,
  },
  filters: {
    formatDate(time) {
      if (time !== 0) {
        let date = new Date(time * 1000);
        return formatDate(date, 'yyyy-MM-dd hh:mm');
      }
    },
  },
  data() {
    return {
      images: ['1.jpg', '2.jpg'],
      modal_loading: false,
      fail_msg: {
        message: '输入信息不完整或有误!',
      },
      modals: false,
      total: 0,
      cardLists: [],
      loading: false,
      status_str: '1',
      tabs: [
        { tit: '服务人员', name: '1' },
        { tit: '门店', name: '2' },
      ],
      columns: [
        {
          title: 'ID',
          key: 'id',
          width: 80,
        },
        {
          title: '用户信息',
          slot: 'nickname',
          minWidth: 180,
        },
        {
          title: '提现金额',
          slot: 'extract_price',
          minWidth: 90,
        },
        {
          title: '提现方式',
          slot: 'extractType',
          minWidth: 150,
        },
        {
          title: '收款码',
          slot: 'qrcode_url',
          minWidth: 150,
        },
        {
          title: '添加时间',
          slot: 'add_time',
          minWidth: 100,
        },
        {
          title: '备注',
          key: 'mark',
          minWidth: 100,
        },
        {
          title: '审核状态',
          slot: 'status',
          minWidth: 180,
        },
        {
          title: '操作',
          slot: 'createModalFrame',
          fixed: 'right',
          width: 100,
        },
      ],
      tabList: [],
      fromList: {
        title: '选择时间',
        custom: true,
        fromTxt: [
          { text: '全部', val: '' },
          { text: '今天', val: 'today' },
          { text: '昨天', val: 'yesterday' },
          { text: '本周', val: 'week' },
          { text: '本月', val: 'month' },
          { text: '本季度', val: 'quarter' },
          { text: '本年', val: 'year' },
        ],
      },
      treeData: {
        withdrawal: [
          {
            title: '全部',
            value: '',
          },
          {
            title: '未通过',
            value: -1,
          },
          {
            title: '申请中',
            value: 0,
          },
          {
            title: '已通过',
            value: 1,
          },
        ],
        payment: [
          {
            title: '全部',
            value: '',
          },
          {
            title: '微信',
            value: 'wx',
          },
          {
            title: '支付宝',
            value: 'alipay',
          },
          {
            title: '银行卡',
            value: 'bank',
          },
        ],
      },
      formValidate: {
        status: '',
        extractType: '',
        nireid: '',
        date: '',
        type: 1,
        page: 1,
        limit: 20,
      },
      extractStatistics: {},
      timeVal: [],
      FromData: null,
      extractId: 0,
    };
  },
  watch: {
    $route() {
      if (this.$route.fullPath === this.$routeProStr + '/finance/user_extract/index?status=0') {
        this.getPath();
      }
    },
  },

  mounted() {
    this.formValidate.type = 1;
    this.status_str = '1';
    if (this.$route.fullPath === this.$routeProStr + '/finance/user_extract/index?status=0') {
      this.getPath();
    } else {
      this.getList();
    }
  },
  methods: {
    onChangeTab(e) {
      // console.log(name)
      this.status_str = e.name;
      this.getList();
    },
    getPath() {
      this.formValidate.page = 1;
      this.formValidate.status = parseInt(this.$route.query.status);
      this.getList();
    },
    // 无效
    invalid(row) {
      this.extractId = row.id;
      this.modals = true;
    },
    // 确定
    oks() {
      this.modal_loading = true;
      let form = {
        failMsg: this.fail_msg.message,
        id: this.extractId,
      };
      if (this.status_str == 1) {
        cashRefuseApi(form)
          .then(async (res) => {
            this.$message.success('操作成功');
            this.modal_loading = false;
            this.modals = false;
            this.getList();
          })
          .catch((res) => {
            this.$message.error('操作失败');
          });
      } else {
        companyExtractRefuseApi(form)
          .then(async (res) => {
            this.$message.success('操作成功');
            this.modal_loading = false;
            this.modals = false;
            this.getList();
          })
          .catch((res) => {
            this.$message.error('操作失败');
          });
      }
    },
    // 通过
    adopt(row, tit, num) {
      let func;
      if (this.status_str == 1) {
        func = cashAdoptApi;
      } else {
        func = companyExtractAdoptApi;
      }
      this.$modalSure(tit).then(() => {
        func(row.id)
          .then((res) => {
            this.$message.success('操作成功');
            this.getList();
          })
          .catch((err) => {
            this.$message.error('操作失败');
          });
      });
    },
    // 具体日期
    onchangeTime(e) {
      this.timeVal = e;
      this.formValidate.date = this.timeVal.join('-');
      this.formValidate.page = 1;
      this.getList();
    },
    // 选择时间
    selectChange(tab) {
      this.formValidate.page = 1;
      this.formValidate.date = tab;
      this.timeVal = [];
      this.getList();
    },
    // 选择
    selChange() {
      this.formValidate.page = 1;
      this.getList();
    },
    // 列表
    getList() {
      this.loading = true;
      if (this.status_str == 1) {
        cashListApi(this.formValidate).then(async (res) => {
          let data = res;
          this.tabList = data.list.list;
          this.total = data.list.total;
          this.extractStatistics = data.extractStatistics;
          this.cardLists = [
            { col: 6, count: this.extractStatistics.price, name: '待提现金额', icon: 'el-icon-s-cooperation',color: '#4d7cfe' },
            { col: 6, count: this.extractStatistics.brokerageCount, name: '佣金总金额', icon: 'el-icon-s-ticket',color: '#ffab2b' },
            { col: 6, count: this.extractStatistics.priced, name: '已提现金额', icon: 'el-icon-s-finance',color: '#6dd230' },
            { col: 6, count: this.extractStatistics.brokerageNot, name: '未提现金额', icon: 'el-icon-s-shop',color: '#ff85c0' },
          ];
          this.loading = false;
        });
      } else {
        companyExtractListApi(this.formValidate).then(async (res) => {
          let data = res;
          this.tabList = data.list.list;
          this.total = data.list.total;
          this.extractStatistics = data.extractStatistics;
          this.cardLists = [
            {
              col: 6,
              count: this.extractStatistics.price,
              name: '待提现金额',
              icon: 'el-icon-s-cooperation',
              color: '#4d7cfe'
            },
            {
              col: 6,
              count: this.extractStatistics.brokerageCount,
              name: '佣金总金额',
              icon: 'el-icon-s-finance',
              color: '#ffab2b'
            },
            {
              col: 6,
              count: this.extractStatistics.priced,
              name: '已提现金额',
              icon: 'el-icon-circle-check',
              color: '#6dd230'
            },
            {
              col: 6,
              count: this.extractStatistics.brokerageNot,
              name: '未提现金额',
              icon: 'el-icon-s-shop',
              color: '#ff85c0'
            },
          ];
          this.loading = false;
        });
      }
    },
    pageChange(index) {
      this.formValidate.page = index;
      this.getList();
    },
    // 编辑
    edit(row) {
      if (this.status_str == 1) {
        cashEditApi(row.id)
          .then(async (res) => {
            if (res.data.status === false) {
              return this.$authLapse(res.data);
            }
            this.FromData = res.data;
            this.$refs.edits.modals = true;
          })
          .catch((res) => {
            this.$message.error(res.msg);
          });
      } else {
        getCompanyExtractFormApi(row.id)
          .then((res) => {
            if (res.data.status === false) {
              return this.$authLapse(res.data);
            }
            this.FromData = res.data;
            this.$refs.edits.modals = true;
          })
          .catch((res) => {
            this.$message.error(res.msg);
          });
      }
    },
    // 编辑提交成功
    submitFail() {
      this.getList();
    },
  },
};
</script>
    <style scoped lang="stylus">
    .ivu-mt .type .item {
      margin: 3px 0;
    }

    .tabform {
      margin-bottom: 10px;
    }

    .Refresh {
      font-size: 12px;
      color: #1890FF;
      cursor: pointer;
    }

    .ivu-form-item {
      margin-bottom: 10px;
    }

    .status >>> .item~.item {
      margin-left: 6px;
    }

    .status >>> .statusVal {
      margin-bottom: 7px;
    }

    /* .ivu-mt >>> .ivu-table-header */
    /* border-top:1px dashed #ddd!important */
    .type {
      padding: 3px 0;
      box-sizing: border-box;
    }

    .tabBox_img {
      width: 36px;
      height: 36px;
      border-radius: 4px;
      cursor: pointer;

      img {
        width: 100%;
        height: 100%;
      }
    }
</style>
    